<template>
    <el-dialog
        :before-close="resetForm"
        :close-on-click-modal="false"
        :visible.sync="visible"
        append-to-body
        title="选择用户信息"
        width="560px"
    >
        <div class="list_page_div">
            <page-list :loading="loading" :table-config="tableConfig" :data-list="dataList" :height="height" show-index
                       show-page :total="total" :currentPage="param.pageNum" :pageSize="param.pageSize" @currentChange="handleCurrentChange"
                       :show-operate="selectOne" :show-select="!selectOne" @change="selectObj">
                <template #searchArea>
                    <el-input v-model="param.nickName" clearable placeholder="用户昵称" style="width: 200px;"></el-input>
                    <el-input v-model="param.accountNumber" clearable placeholder="用户账号" style="width: 200px;"></el-input>
                    <el-button type="primary" @click="searchList">查询</el-button>
                    <el-button type="primary" @click="resetData">重置</el-button>
                    <el-button v-if="!selectOne" type="primary" @click="submit(null)">确定</el-button>
                </template>

                <template v-if="selectOne" #operateContent="scope">
                    <el-button type="text" @click="submit(scope.row)">选择</el-button>
                </template>
            </page-list>
        </div>
    </el-dialog>
</template>

<script>

import PageList from "@/components/grid/pageList.vue";

export default {
    name: "userSelect",
    components: {PageList},
    props: {
        visible: Boolean,
        selectOne: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            height: '500px',
            loading: false,

            id: '',
            tableConfig: [
                {label: "用户类型", prop: "userType", width: 100, slot: true},
                {label: "用户昵称", prop: "nickName", width: 200},
                {label: "用户账号", prop: "accountNumber", width: 200},
                {label: "角色信息", prop: "roleNames", minWidth: 200},
                {label: "启用", prop: "enableFlag", width: 60, slot: true},
                {label: "创建时间", prop: "createTime", width: 200},
            ],
            dataList: [],
            total: 0,
            param: {
                nickName: '',
                accountNumber: '',
                field: 'create_time',
                order: 'desc',
                pageSize: 20,
                pageNum: 1,
            },

            selectList: [],
        }
    },
    watch: {
        visible(newval, oldval) {
            this.searchList();
        }
    },
    methods: {
        handleCurrentChange(val) {
            this.param.pageNum = val;
            this.searchList();
        },
        resetData() {
            this.param.nickName = '';
            this.param.accountNumber = '';
            this.param.pageNum = 1;
            this.searchList();
        },
        searchList() {
            this.loading = true;
            this.$axios.post("/CHILD_ORGANIZE/systemUser/getPageList", this.param).then(res => {
                this.total = res.data.total;
                this.dataList = res.data.rows;
                this.loading = false;
            }).catch(() => {
                this.loading = false;
            })
        },
        selectObj(val) {
            let oldData = new Set(this.selectList);
            if (oldData.size > 0) {
                this.dataList.forEach(temp => {
                    oldData.delete(temp);
                })
            }

            let addList = [];
            val.forEach(temp => {
                addList.push(temp);
            })
            this.selectList = [...oldData].concat(addList);
        },
        submit(row) {
            if (row) {
                this.selectList.push(row);
            }
            this.$emit('change', this.selectList);
            this.resetForm();
        },
        resetForm() {
            this.selectList = [];
            this.$emit('update:visible', false);
        },
    }
}
</script>

<style scoped>

</style>